<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import viewHeader from './components/viewHeader.vue';
import viewFooter from './components/viewFooter.vue';

const route = useRoute();
</script>

<template>
    <div class="app">
        <viewHeader />
        <div class="box">
            <router-view v-slot="{ Component }">
                <transition name="fade" mode="out-in">
                    <component :is="Component" />
                </transition>
            </router-view>
        </div>
        <viewFooter />
    </div>
</template>

<style scoped>
.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.box {
    padding: 60px 20px 0;
    flex: 1;
}
</style>
